<template>
	<div>
		<!--toolbar-->
		<el-row id="toolbar_unit">
			<el-col :span="24">
				<div class="grid-content bg-purple-light">
					<el-button type="success" size="mini" icon="el-icon-check" @click="handleAdd">新增</el-button>
				</div>
			</el-col>
		</el-row>

		<!--列表-->
		<el-table :data="gridDatas" id="dataGrid" empty-text=" " border stripe size="mini" :header-row-class-name="headStyle" highlight-current-row v-loading="listLoading" :row-class-name="tableRowClassName" @sort-change="handleSortChange" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="selection" width="45"></el-table-column>
			<el-table-column prop="index" :formatter="index_formatter" label="序号" width="60"></el-table-column>
			<el-table-column prop="communityName" label="所属小区" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="communityId" v-if="false"></el-table-column>
			<el-table-column prop="appId" label="小程序ID" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="mchId" label="商户号" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="spbillCreateIp" label="终端IP" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="notifyUrl" label="通知地址" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="tradeType" label="交易类型" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="key" label="密钥"  show-overflow-tooltip></el-table-column>			
			<el-table-column label="操作" fixed="right" width="160">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="mini" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar" id="pageDiv">
			<el-pagination small background @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" layout="total,sizes, prev, pager, next" style="float:right;"></el-pagination>
		</el-col>

		<!--编辑界面-->
		<el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false">
			<el-form :model="editForm" label-width="80px" :rules="addFormRules" ref="editForm" size="medium">
				<el-col :span="12">
					<el-form-item label="所属小区" prop="communityId">
						<el-select size="small" v-model="editForm.communityId" clearable placeholder="请选择">
							<el-option v-for="item in communityOptions" :key="item.value" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="小程序ID" prop="appId">
						<el-input v-model="editForm.appId" size="small"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="商户号" prop="mchId">
						<el-input v-model="editForm.mchId" size="small"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="终端IP" prop="spbillCreateIp">
						<el-input v-model="editForm.spbillCreateIp" size="small"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="通知地址" prop="notifyUrl">
						<el-input v-model="editForm.notifyUrl" size="small"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="交易类型" prop="tradeType">
						<el-input v-model="editForm.tradeType" size="small"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="密钥" prop="key">
						<el-input v-model="editForm.key" size="small"></el-input>
					</el-form-item>
				</el-col>
			
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

		<!--新增界面-->
		<el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm" size="medium">
				<el-col :span="12">
					<el-form-item label="所属小区" prop="communityId">
						<el-select size="small" v-model="addForm.communityId" clearable placeholder="请选择">
							<el-option v-for="item in communityOptions" :key="item.value" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="小程序ID" prop="appId">
						<el-input v-model="addForm.appId" size="small"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="商户号" prop="mchId">
						<el-input v-model="addForm.mchId" size="small"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="终端IP" prop="spbillCreateIp">
						<el-input v-model="addForm.spbillCreateIp" size="small"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="通知地址" prop="notifyUrl">
						<el-input v-model="addForm.notifyUrl" size="small"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="交易类型" prop="tradeType">
						<el-input v-model="addForm.tradeType" size="small"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="密钥" prop="key">
						<el-input v-model="addForm.key" size="small"></el-input>
					</el-form-item>
				</el-col>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

	</div>
</template>
<script>
	import { getToken, setToken, removeToken, getFileIp } from "@/util/auth";
	import { getUUID } from "@/util/util";
	import request from "@/router/axios";
	export default {
		name: "payinterface",
		data() {
			return {
				communityOptions: [],
				filters: {
					communityId: "",
					title: ""
				},
				url: {
					//单元数据
					list: "/admin/payInterface/page",
					save: "/admin/payInterface/add",
					edit: "/admin/payInterface/edit",
					del: "/admin/payInterface/delete"
				},
				gridDatas: [],
				sort: {
					sort: "sort",
					order: "asc"
				},
				total: 0,
				page: 1,
				pageSize: 10,
				listLoading: false,
				sels: [],
				imgPaths: [],
				imgList: [],
				imgListShow: [],
				editLoading: false,
				editFormVisible: false,
				addFormVisible: false,
				editForm: {},
				addForm: {},
				addFormRules: {
					communityId:[
						{required: true,message: '请选择小区'}
					],
					appId:[
						{required: true,message: '请输入小程序ID'}
					],
					mchId:[
						{required: true,message: '请输入商户号'}
					],
					spbillCreateIp:[
						{required: true,message: '请输入终端IP'}
					],
					notifyUrl:[
						{required: true,message: '请输入通知地址'}
					],
					tradeType:[
						{required: true,message: '请输入交易类型'}
					],
					key:[
						{required: true,message: '请输入密钥'}
					],
					
				},
			};
		},
		methods: {
			//初始化数据字典
			initDictsData: function() {
				request.get("/admin/community?getCommunitysByCurrentUser").then((res) => {
					if(res.status === 200) {
						this.communityOptions = res.data;
					}
				});
			},
			handleSortChange(sort) {
				this.sort = {
					sort: sort.prop,
					order: sort.order == "ascending" ? "asc" : "desc"
				};
				this.getDataGrid();
			},
			tableRowClassName(row, index) {
				//把每一行的索引放进row
				row.index = row.rowIndex;
			},
			headStyle({
				row,
				rowIndex
			}) {
				return "table_head_style";
			},
			index_formatter: function(row, column, cellValue, index) {
				//放回索引值
				return this.pageSize * (this.page - 1) + 1 + index;
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getDataGrid();
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.page = 1;
				this.getDataGrid();
			},
			resetSearchForm(formName) {
				this.filters = {
					title: '',
					communityId: ''
				}
			},
			selsChange: function(sels) {
				this.sels = sels;
			},
			handleSubmit: function(index, row) {
				this.editUnitFormVisible = true;
				this.editUnitForm = Object.assign({}, row);
			},

			//新增
			handleAdd: function() {
				this.addFormVisible = true;
			},
			//删除
			handleDel: function(index, row) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					let para = {
						id: row.id
					};
					request.get(this.url.del+"/"+row.id).then((res) => {
						this.listLoading = false;
						this.$message({
							message: '删除成功',
							type: 'success',
							duration: 1500
						});
						this.getDataGrid();
					});
				}).catch(() => {

				});
			},
			//显示编辑界面
			handleEdit: function(index, row) {
				this.editFormVisible = true;
				var item = {};
				this.editForm = Object.assign({}, row);
				this.imgList = [];
				this.uploadParams.relationId = row.id;
				let para = {
					id: row.id
				};
				request({
					url: "/admin/repairRecord/showImg",
					method: "get",
					params: para
				}).then(res => {
					for(var i = 0; i < res.data.length; i++) {
						this.imgList.push({
							url: getFileIp() + res.data[i].data,
							id: res.data[i].id
						});
					}

				});

			},

			//编辑
			editSubmit: function() {
				this.$refs.editForm.validate(valid => {
					if(valid) {
						this.$confirm("确认提交吗？", "提示", {}).then(() => {
							this.editLoading = true;
							let para = Object.assign({}, this.editForm);
							request.post(this.url.edit, para).then(res => {
								this.editLoading = false;
								this.$message({
									message: "提交成功",
									type: "success",
									duration: 1500
								});
								this.$refs["editForm"].resetFields();
								this.editFormVisible = false;
								this.getDataGrid();
							});
						});
					}
				});
			},
			addSubmit: function() {
				this.$refs.addForm.validate(valid => {
					if(valid) {
						this.$confirm("确认提交吗？", "提示", {}).then(() => {
							this.editLoading = true;
							this.addForm.imgPath = this.imgPaths.toString();
							let param = Object.assign({}, this.addForm);
							request.post(this.url.save, param).then(res => {
								this.editLoading = false;
								this.$message({
									message: "提交成功",
									type: "success",
									duration: 1500
								});
								this.$refs["addForm"].resetFields();
								this.addFormVisible = false;
								this.getDataGrid();
							});
						});
					}
				});
			},

			//获取单元列表数据
			getDataGrid() {
				//获取当前树节点选中小区
				let para = {
					params: {
						page: this.page,
						limit: this.pageSize,
						//排序
						orderByField: this.sort.sort,
						isAsc: this.sort.order
					}
				};
				this.listLoading = true;
				request.get(this.url.list, para).then(res => {
					this.total = res.data.total;
					var datas = res.data.records;
					this.gridDatas = datas;
					this.listLoading = false;
				});
			}
		},
		mounted() {
			this.initDictsData();
			this.getDataGrid();
		}
	};
</script>